<!--
 * @Author: HeAo
 * @Date: 2021-12-19 16:54:25
 * @LastEditTime: 2021-12-20 09:45:28
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \am-app\src\views\manager\OrderDetail.vue
-->
<template>
  <div class="orderDetail">
    <van-nav-bar
      title="工单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 工单信息展示表单 -->
    <van-form :readonly="true">
      <van-field label="工单类型" v-model="workeOrder.type"></van-field>
      <van-field label="工单状态" v-model="workeOrder.status"></van-field>
      <van-field label="项目名称" v-model="workeOrder.engineer_name"></van-field>
      <van-field label="设备名称" v-model="workeOrder.device_name"></van-field>
      <van-field label="申报原因" v-model="workeOrder.bill_why"></van-field>
      <van-field label="申报图片"></van-field>
      <!-- 判断如果begin_photos的长度>0，才做显示，否则显示默认值 -->
      <div v-if="workeOrder.begin_photos.length > 0" class="begin_photos">
        <img
          v-for="(item, index) in workeOrder.begin_photos"
          :key="index"
          :src="item"
          alt="图片丢失"
        />
      </div>
      <div class="none_photo" v-else>暂无图片</div>
    </van-form>
    <div class="button" v-if="workeOrder.status==='待接单'">
      <van-button @click="takeWorkOrder" type="info" style="width: 100%">
        确认接单</van-button>
      <van-button @click="cancelOrder" type="info" style="width: 100%">
        取消接单</van-button>
    </div>
    <div class="button" v-else-if="workeOrder.status==='进行中'">
      <van-button @click="finishWorkOrder" type="info" style="width: 100%">
        确认结单</van-button>
    </div>
  </div>
</template>
<script>
import { get } from "@/http/axios";
import { mapState } from "vuex";
import { Dialog } from "vant";
import { Notify } from "vant";
export default {
  data() {
    return {
      workeOrder: {},
    };
  },
  // vue的计算属性
  computed: { 
    // 将保存了用户信息的info映射过来
    ...mapState("user", ["info"]),
  },
  methods: {
    // 返回按钮点击事件
    onClickLeft() {
      this.$router.go(-1);
    },
    // 确认接单
    takeWorkOrder() {
      // 封装参数
      const params = {
        id: this.workeOrder.id, // 工单id
        account_id: this.info.id, // 工人的账号id
      };
      Dialog.confirm({
        title: "确认操作",
        message: "是否确认接单",
      }).then(() => {
        // 用户确认之后再去做接单的请求
        get("/workorder/takeOrder", params).then((res) => {
          // 1.返回app首页
          this.$router.go(-1);
          // 2.提示成功接单的信息
          Notify({ type: "success", message: "接单成功" });
        });
      });
    },
    // 确认结单
    finishWorkOrder() {
      // 封装参数
      const params = {
        id: this.workeOrder.id, // 工单id
        account_id: this.info.id, // 工人的账号id
        photo1: "image1",
        photo2: "image2",
        photo3: "image3",
        finish_time: Date.parse(new Date()),
      };
      Dialog.confirm({
        title: "确认操作",
        message: "是否确认结单",
      }).then(() => {
        // 用户确认之后再去做结单的请求
        get("/workorder/finishOrder", params).then((res) => {
          // 1.返回app首页
          this.$router.go(-1);
          // 2.提示成功结单的信息
          Notify({ type: "success", message: "结单成功" });
        });
      });
    },

    cancelWorkOrder() {
      // 封装参数
      const params = {
        id: this.workeOrder.id, // 工单id
      };
      Dialog.confirm({
        title: "确认操作",
        message: "是否确认取消",
      }).then(() => {
        // 用户确认之后再去做结单的请求
        get("/workorder/cancelOrder", params).then((res) => {
          // 1.返回app首页
          this.$router.go(-1);
          // 2.提示成功结单的信息
          Notify({ type: "success", message: "取消成功" });
        });
      });
    },
  
  },

  created() {
    // 将路由跳转携带的参数设置到当前页面的数据模型中
    this.workeOrder = this.$route.query;
  },
};
</script>
<style scoped>
.button {
  padding: 10px;
}
.none_photo {
  height: 130px;
  line-height: 160px;
  text-align: center;
  font-size: 22px;
  color: #999;
  font-weight: bold;
}
</style>
